<template>
	<div>
		<div class="graybg"></div>
		<div class="header header_bg">
			<div class="header_left">
				<i onclick="javascript:history.back(-1)" class="iconfont baiColor">&#xe612;</i>
			</div>
			<div class="header_center">
				<span class="baiColor">忘记支付密码</span>
			</div>
		</div>

		<div class="center " style="padding-top: 47px;">
			<p>支付密码用于账户提现，账单支付等</p>
			<form action="" method="">
				<div id="">
					<label class="left">姓名：</label>
					<input class="right" type="text" name="name" placeholder="请输入姓名" v-model="names" />
				</div>
				<div>
					<label class="left">证件类型：</label>
					<input class="right" type="text" name="type" value="身份证" />
				</div>
				<div :class="isNumC === true ? 'active':''">
					<label class="left">证件号码：</label>
					<input class="right" type="text" name="cardNumber" ref="input_card"
					 @blur="blurCard" minlength="15" maxlength="18" v-model="idno" placeholder="请输入证件号码" />
				</div>
				<div id="" style="margin-top: 4px;">
					<label class="left">支付密码：</label>
					<input class="right" type="password" placeholder="支付密码" maxlength="6" v-model="pass" value="" />
				</div>
				<div id="">
					<label class="left">确认密码：</label>
					<input class="right" type="password" placeholder="确认支付密码" maxlength="6" v-model="surepass" value="" />
				</div>
				<button @click="updatepass($event)">确定</button>
			</form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				//需要验证填写的证件号码和数据中是否一致
				name: '',
				names: '',
				cardNumber: '',
				idno: '',
				isNumC: false,
				pass: '',
				surepass: '',
				datas:'',
			}
		},
		mounted: function() {
			//获取名字和身份证号码
			var params = new URLSearchParams();
			var info = window.localStorage.data;
			//params.append('token', info);	//客户秘钥（信息）
			this.$axios({
				url: 'One/My/realTrue',
				method: "GET",
				params: {
					token: info
				}
			}).then((res) => {
				this.datas = res.data.data
			}).catch((err) => {
				console.log(err)
			})
		},
		methods: {
			//验证身份证号
			blurCard: function() {
				var testCard = new RegExp(/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|[xX])$/)
				var cardValue = this.$refs.input_card.value;
				if(testCard.test(cardValue) && cardValue != "") {
					this.isNumC = false;
				} else {
					this.isNumC = true;
				}
			},

			updatepass: function(ev) {
				ev.preventDefault();
				if(this.names != this.datas.name){
					alert('姓名输入有误，请重新输入')
				}else if(this.idno != this.datas.idno){
					alert('证件号码输入有误，请重新输入')
				}else if (this.pass != this.surepass){
					alert('两次密码输入不一致，请重新输入')
				}else {
					var params = new URLSearchParams();
					var info = window.localStorage.data;
					params.append('token', info); //客户秘钥（信息）
					params.append('type', 3)
//					params.append('password', this.pass); //支付密码
					params.append('pwd', this.surepass); //确认支付密码
					params.append('name', this.name);//姓名
					params.append('idno', this.idno);//身份证号
					this.$axios({
						url: "Home/Money/alipay_pwd",
						method: "POST",
						data: params
					}).then((res) => {
						console.log(res.data)
						if(res.data == 4){
							alert('未通过实名认证 不可进行此操作')
						}else if(res.data == 5){
							alert('信息验证不一致')
						}
					}).catch(function(err) {
						console.log(err)
					})
				}

			}
		},
	}
</script>

<style scoped="scoped">
	@import "../css/public.css";
	.center {
		width: 95%;
		margin: 0 auto;
	}
	
	div.active {
		border: solid 0.5px red !important;
		height: 40px;
	}
	
	.center>p {
		color: #666;
		font-size: 14px;
		padding: 6px 0 8px;
	}
	
	
	form>div {
		background: #FFFFFF;
		overflow: hidden;
		height: 44px;
		line-height: 44px;
		border-bottom: solid 1px #F0F0F0;
	}
	
	form label {
		color: #333;
		font-size: 16px;
		padding-left: 10px;
	}
	
	.left {
		float: left;
		width: 30%;
	}
	
	.right {
		width: 67%;
		float: right;
	}
	
	.center input {
		display: block;
		height: 44px;
		line-height: 44px;
	}
	
	input[value] {
		font-size: 16px;
	}
	
	input::-webkit-input-placeholder {
		color: #999;
		font-size: 16px;
	}

	button {
		background: #F3961F;
		width: 100%;
		height: 45px;
		border-radius: 10px;
		font-size: 18px;
		color: #FCFCFC;
		margin-top: 128px;
	}
</style>